<template>
    <el-drawer @close="close" v-model="visible" title="修改客户" direction="rtl" size="50%">
        <el-form :model="userInfoAddForm" label-width="120px" :rules="rules">
            <el-form-item label="客户名称" prop="name">
                <el-input v-model="userInfoAddForm.name" />
            </el-form-item>
            <el-row justify="space-between">
                <el-col :span="12">
                    <el-form-item label="客户类型" prop="type">
                        <el-radio-group v-model="userInfoAddForm.type">
                            <el-radio label="1" value="1">企业</el-radio>
                            <el-radio label="2" value="2">个人</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="客户状态" prop="status">
                        <el-select v-model="userInfoAddForm.status" placeholder="请选择客户状态">
                            <el-option label="未沟通" value="0" />
                            <el-option label="有意向" value="1" />
                            <el-option label="无意向" value="2" />
                            <el-option label="已成交" value="3" />
                            <el-option label="信息有误" value="4" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="客户标签" prop="labels">
                <el-select v-model="userInfoAddForm.labels" placeholder="请选择客户标签">
                    <el-option label="仓储" value="4" />
                    <el-option label="青岛" value="3" />
                </el-select>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="userInfoAddForm.address" placeholder="请输入地址" />
            </el-form-item>
            <el-row justify="space-between">
                <el-col :span="12">
                    <el-form-item label="手机号1">
                        <el-input v-model="userInfoAddForm.mobileNo1" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号2">
                        <el-input v-model="userInfoAddForm.mobileNo2" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="手机号3">
                <el-input v-model="userInfoAddForm.mobileNo3" placeholder="请输入" />
            </el-form-item>

            <el-row justify="space-between">
                <el-col :span="12">
                    <el-form-item label="座机1">
                        <el-input v-model="userInfoAddForm.telNo1" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="座机2">
                        <el-input v-model="userInfoAddForm.telNo2" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="座机3">
                <el-input v-model="userInfoAddForm.telNo3" placeholder="请输入" />
            </el-form-item>

            <el-row justify="space-between">
                <el-col :span="12">
                    <el-form-item label="邮箱1">
                        <el-input v-model="userInfoAddForm.mailAddress1" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮箱2">
                        <el-input v-model="userInfoAddForm.mailAddress2" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="邮箱3">
                <el-input v-model="userInfoAddForm.mailAddress3" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="销售人员">
                <el-select v-model="userInfoAddForm.saleUserId" placeholder="请选择" style="width: 100%">
                    <el-option label="墨" value="1aae1d6410a04d86b28fc5f2e055f0a5" />
                    <el-option label="简单" value="a47082765892416db827bebf2de2fb99" />
                    <el-option label="系统" value="b12f736059694186a25ff0bbff2df819" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="userInfoAddForm.remark" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submit">确认</el-button>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
const props = defineProps({
    reload: {
        type: Function,
        required: true
      }
})
import { ref, reactive } from "vue";
import { update } from "@/api/userInfo"
const userInfoAddForm = ref({
    name: "",
    type: "",
    status: "",
    labels: "",
    address: "",
    mobileNo1: "",
    mobileNo2: "",
    mobileNo3: "",
    telNo1: "",
    telNo2: "",
    telNo3: "",
    mailAddress1: "",
    mailAddress2: "",
    mailAddress3: "",
    saleUserId: "",
    remark: ""
})
const visible = ref<boolean>(false)
const show = (record: any) => {
    userInfoAddForm.value = record
    visible.value = true
}
const rules = reactive<any>({
    name: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 5, message: '2-5个字', trigger: 'blur' },
    ],
    type: [
        {
            required: true,
            message: '请选择客户类型',
            trigger: 'change',
        },
    ],
    status: [
        {
            required: true,
            message: '请选择客户状态',
            trigger: 'change',
        },
    ],
    labels: [
        { required: true, message: '请选择客户标签', trigger: 'blur' },
    ],
})
const close = () => {
    visible.value = false
}
const submit = () => {
    update(userInfoAddForm.value).then((res: any) => {
        if(res.code === 10000){
            close()
            props.reload()
        }
    })
}
defineExpose({
    show
})
</script>

<style scoped>
.el-form {
    width: 80%
}
</style>